<template>
  <div>
    <!-- <el-button type="primary" size="mini" @click="dataFormSubmit()">提交</el-button> -->
    <!-- clear是否显示面板上清除按钮 -->
    <!-- <ng-form-design ref="formBuild" :preview="false" :reder-preview="false" :isDragPanel="true" /> -->
    <ng-form-build ref="formBuild" :form-template="form" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            type: 'divider',
            event_: false,
            listen_: false,
            options: {
              direction: 'horizontal',
              orientation: 'center',
              hidden: false
            },
            label: '基础信息',
            labelWidth: 0,
            width: '100%',
            span: 24,
            key: 'divider_1742270194606',
            model: 'divider_1742270194606',
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_1742287009919',
            key: 'input_1742287009919',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_1742287009015',
            key: 'input_1742287009015',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_1742287008514',
            key: 'input_1742287008514',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_1742287008089',
            key: 'input_1742287008089',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_17422699880732',
            key: 'input_17422699880732',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_17422700454452',
            key: 'input_17422700454452',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_1742287010505',
            key: 'input_1742287010505',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_17422699675002',
            key: 'input_17422699675002',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'input',
            options: {
              defaultValue: '',
              type: 'text',
              prepend: '',
              append: '',
              placeholder: '请输入',
              maxLength: 0,
              clearable: false,
              hidden: false,
              disabled: false
            },
            label: '输入框',
            labelWidth: -1,
            width: '100%',
            span: 8,
            model: 'input_1742287011093',
            key: 'input_1742287011093',
            rules: [
              {
                required: false,
                message: '必填项',
                trigger: ['blur']
              }
            ],
            dynamicLabel: false
          },
          {
            type: 'divider',
            event_: false,
            listen_: false,
            options: {
              direction: 'horizontal',
              orientation: 'center',
              hidden: false
            },
            label: '明细信息',
            labelWidth: 0,
            width: '100%',
            span: 24,
            key: 'divider_17431275927962',
            model: 'divider_17431275927962',
            dynamicLabel: false
          },
          {
            type: 'button',
            event_: false,
            listen_: false,
            options: {
              size: 'mini',
              type: 'success',
              align: 'left',
              control: 'reset',
              eventName: '',
              script: '',
              plain: false,
              circle: false,
              round: false,
              disabled: false
            },
            label: '添加',
            labelWidth: 0,
            width: '100%',
            span: 1,
            model: 'button_17431268342852',
            key: 'button_17431268342852',
            dynamicLabel: false
          },
          {
            type: 'button',
            event_: false,
            listen_: false,
            options: {
              size: 'mini',
              type: 'danger',
              align: 'left',
              control: 'reset',
              eventName: '',
              script: '',
              plain: false,
              circle: false,
              round: false,
              disabled: false
            },
            label: '提交',
            labelWidth: 0,
            width: '100%',
            span: 1,
            model: 'button_1743126963203',
            key: 'button_1743126963203',
            dynamicLabel: false
          },
          {
            type: 'button',
            event_: false,
            listen_: false,
            options: {
              size: 'mini',
              type: 'primary',
              align: 'center',
              control: 'reset',
              eventName: '',
              script: '',
              plain: false,
              circle: false,
              round: false,
              disabled: false
            },
            label: '取消审批',
            labelWidth: 0,
            width: '100%',
            span: 1.5,
            model: 'button_1743126960214',
            key: 'button_1743126960214',
            dynamicLabel: false
          },
          {
            type: 'button',
            event_: false,
            listen_: false,
            options: {
              size: 'mini',
              type: 'warning',
              align: 'center',
              control: 'reset',
              eventName: '',
              script: '',
              plain: false,
              circle: false,
              round: false,
              disabled: false
            },
            label: '审批记录',
            labelWidth: 0,
            width: '100%',
            span: 1.5,
            model: 'button_1743126996416',
            key: 'button_1743126996416',
            dynamicLabel: false
          },

          {
            type: 'dataTable',
            options: {
              dbType: '1',
              datasourceStatic: [
                {
                  id: '1',
                  username: '李四',
                  operate: ['浏览', '修改', '删除'],
                  checkbox: 'true',
                  department: '测试部门',
                  state: '草拟',
                  amt: '500',
                  date: '2025-03-27'
                },
                {
                  id: '2',
                  username: '张三',
                  operate: ['浏览', '修改', '删除'],
                  checkbox: 'true',
                  department: '测试部门',
                  amt: '400',
                  state: '草拟',
                  date: '2025-03-27'
                },
                {
                  id: '3',
                  username: '王五',
                  operate: ['浏览', '修改', '删除'],
                  checkbox: 'true',
                  department: '测试部门',
                  amt: '700',
                  state: '草拟',
                  date: '2025-03-27'
                }
              ],
              methodType: 'get',
              queryData: [],
              apiPath: '',
              columns: [
                {
                  label: '序号',
                  column: 'id',
                  width: '50px',
                  formater:
                    '(row)=>{\n                // 显示当前行数据的名称\n                return row.id;\n            }',
                  align: 'center',
                  id: 1742277290911,
                  children: [],
                  index: 1
                },
                {
                  label: '选择',
                  column: 'checkbox',
                  width: '50px',
                  formater:
                    "(row)=>{\nvar div ='<input type=checkbox name=items value='+row.checkbox+'></input>'\n\n  return div;\n}",
                  align: 'center',
                  id: 1743061163404,
                  children: [],
                  index: 0
                },
                {
                  label: '操作',
                  column: 'operate',
                  width: '200px',
                  formater:
                    "(row)=>{\nvar div =''\n row.operate.forEach(item => {\n    div +=  '<button>'+item +'</button>';\n})\n  return div;\n}",
                  align: 'center',
                  id: 1743059425366,
                  children: [],
                  index: 2
                },
                {
                  label: '名称',
                  column: 'username',
                  width: '',
                  formater:
                    '(row)=>{\n                // 显示当前行数据的名称\n                return row.username;\n            }',
                  align: 'center',
                  id: 1742277662238,
                  index: 2
                },
                {
                  label: '金额',
                  column: 'amt',
                  width: '',
                  formater: '',
                  align: 'right',
                  id: 1743064178716,
                  index: 4
                },
                {
                  label: '部门',
                  column: 'department',
                  width: '',
                  formater: '',
                  align: 'center',
                  id: 1743063622338
                },
                {
                  label: '状态',
                  column: 'state',
                  width: '',
                  formater: '',
                  align: 'center',
                  id: 1743063788842
                },
                {
                  label: '说明',
                  column: '',
                  width: '',
                  formater: '',
                  align: 'center',
                  id: 1743064228339
                }
              ],
              apiDataScript: '',
              rowHeight: 0,
              headerHeight: 0,
              page: true,
              smallPage: false,
              pageAlign: 'left',
              currentPageKey: 'pageIndex',
              pageSizeKey: 'pageSize',
              pageSize: 10,
              border: true,
              stripe: false,
              showIndex: false,
              hidden: false
            },
            label: '数据表格',
            labelWidth: 0,
            width: '100%',
            span: 24,
            model: 'dataTable_17422770959412',
            key: 'dataTable_17422770959412',
            size: 'medium',
            height: 330,
            maxHeight: 0,
            dynamicLabel: false
          }
        ],
        config: {
          labelPosition: 'right',
          labelWidth: 60,
          size: 'mini',
          outputHidden: true,
          hideRequiredMark: false,
          syncLabelRequired: false,
          labelSuffix: '',
          customStyle: ''
        }
      }
    }
  },
  created() {
    setTimeout(() => {
      this.dataFormSubmit()
    }, 100)
  },

  methods: {
    dataFormSubmit() {
      // this.$refs.formBuild.initModel(this.form)
    }
  }
}
</script>

<style>
p {
  color: red;
}
</style>
